<template>
  <div>
    <div class="nav_search">
      <router-link to="/home">
        <span class="iconfont icon-home home"></span>
      </router-link>

      <span class="font_ss">网易优选</span>
      <router-link to="search">
        <span class="iconfont icon-fenxiang big"></span>
      </router-link>
      <router-link to="/cart">
        <span class="iconfont icon-cart_light cart"></span>
      </router-link>
    </div>
    <!-- 下拉导航栏 -->
    <div class="nav_dec">
      <van-tabs v-model:active="active">
        <van-tab v-for="index in 8" :title="'标签 ' + index">
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <p class="van_refs"></p>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 大盒子 -->
    <div class="nav_list_big">
        <el-card class="elCards">
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div>
              <div class="span_one">羊毛付爱你</div>
              <div>
                <span class="span_1">￥226</span>
                <span class="span_2">323</span>
              </div>
              <div class="bottom">
                <span class="botton_te">特价</span>
                <div class="botton_ing">正在抢购</div>
              </div>
            </div>
        </el-card>

        <el-card class="elCards">
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div>
              <div class="span_one">羊毛付爱你</div>
              <div>
                <span class="span_1">￥226</span>
                <span class="span_2">323</span>
              </div>
              <div class="bottom">
                <span class="botton_te">特价</span>
                <div class="botton_ing">正在抢购</div>
              </div>
            </div>
        </el-card>
    </div>
 </div>
</template>

<script setup lang="ts">
import { ref ,onMounted, toRaw} from "vue";
import type { TabsPaneContext } from "element-plus";
import { showToast } from "vant";
import list from '@/api/sort'
import {useRoute,useRouter} from 'vue-router'
const route = useRoute() 
const activeName = ref("first");
const timestamp=new Date().getTime();
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

//下拉刷新////////////////////////////////////////////////////////////////////////////////////////////////////////
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    showToast("刷新成功");
    loading.value = false;
    count.value++;
  }, 1000);
};
const getLists =async()=>{
  let categoryId =toRaw(route).query.value.categoryId
  let subCategoryId =toRaw(route).query.value.subCategoryId
  let categoryType =toRaw(route).query.value.categoryType
   try {
      console.log(timestamp,categoryId,subCategoryId,categoryType);
     let result =await list.findList(new Date().getTime(),categoryId,subCategoryId,categoryType)
     console.log("xxx",result);
     
   } catch (error) {
    
   }
}
onMounted(() => {
  getLists()
})
</script>

<style scoped lang="scss">
.flex{
 display: flex;
}
.flex_c{
 flex-direction: column;
}
.nav_search {
  height: 44px;
  width: 100%;
  border: 4px soild #ededee;
  background-color: rgb(250, 250, 250);
}
.nav_search span {
  font-size: 20px;
  height: 25px;
  line-height: 25px;
}
.home {
  margin: 6px 10px;
  float: left;
}
.big {
  float: left;
  margin-right: 10px;
  margin-top: 6px;
}
.cart {
  float: left;
  margin-top: 6px;
}
.font_ss {
  float: left;
  text-align: center;
  margin: 6px 100px;
  display: block;
}
//导航切换
.nav_dec {
  height: 20px;
  width: 100%;
}
.nav_desc {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 2px 15px;
}
.title_top {
  width: 100%;
  height: 3px;
  background-color: rgb(238, 238, 238);
}

//下拉、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
.van_refs {
  height: 14px;
  width: 100%;
  background-color: rgb(237, 237, 237);
  margin-top: 2px;
  font-size: 10px;
  text-align: center;
}
/////////////////////////////////////大盒子///////////////////////////////////////////////////////////////////////////////////////
.nav_btn {
  height: 100%;
  display: flex;
  margin-top: 70px;
}
.nav_small_image {
  height: 172.6px;
  width: 172.6px;
  background-color: #f4f4f4;
  display: block;
}
//大盒标题
.nav_list_big{
    height: 100%;
    width: 100%;
    margin-top: 50px;
    display: flex;
}
.elCards{
    height: 240px;
    width: 180px;
    margin: 10px;
    display: flex;
}
.span_one{
    margin-top: 4px;
    color: #12161c;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    line-height: 20px;   
}
//商品盒子////////////////////////////////////////////////////////////////////////////////////
.span_1{
    width: 33.38px;
    height: 22.4px;
    font-size: 16px;
    color: rgb(250, 30, 50);
    font-weight: bold;
    text-align: left;
    display: block;
    float: left;
}
.span_2{
     width: 12px;
     height: 12px;
     font-size: 12px;
     display: block;
     float: left;
     margin-left: 12px;
     margin-top: 5px;


}
.bottom{
    width: 100%;
    height: 23px;
    background-color: #FFE0EB;
    padding: 0 0 0 6px;
    border-radius: 10px;
}
.botton_te{
    width: 36px;
    height: 100%;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    display: block;
    background-color: red;
    border-radius: 10px;
    float: left;
}
.botton_ing{
     font-size: 11px;
     color:#FA1E32;
     text-align: center;
     float: left;
     margin-left: 4px;
}
</style>
<style>
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 42px;
  font-weight: 600;
}
</style>
<style lang="scss">
.time {
    font-size: 12px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .button {
    padding: 0;
    min-height: auto;
  }
  
  .image {
    width: 127.6px;
    height: 127.6px;
    display: block;
  }
</style>